<template>
  <div :class="{'avatar-wrap':isShowTriangle}">
    <el-avatar :src="userPhoto">
    <img :src="userPhoto" />
  </el-avatar>
  <i v-if="isShowTriangle" class="icon-nav-user-unfold triangle-icon"></i>
  </div>
</template>

<script>
export default {
  props: {
    user:{
      type:Object,
      default:()=>{}
    },
    isShowTriangle:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      userPhoto: null,
      userPhotoUrl: null,
      defaultUserPhoto: require('../../assets/img/defaultPhoto.jpg')
    };
  },
  watch: {
    user: {
      handler: function(val, oldVal) {
        if (val && val.user && val.user.photo && val !== oldVal && val.user.photo != '/img/defaultPhoto.jpg' ) {
          this.$store.dispatch("menu/downloadImg",val.user.photo).then(res => {
            if (res != "") {
              this.userPhoto =  res;
            }else{
              this.userPhoto = this.defaultUserPhoto;
            }
          });
        } else {
          this.userPhoto = this.defaultUserPhoto;
        }
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-wrap{
  display: flex;
  align-items: center;
  .triangle-icon{
    margin-left: 12px;
  }
  &:hover{
    .triangle-icon{
      transform: rotateZ(180deg);
      margin-left: 0;
      margin-right: 12px;
    }
  }
}
::v-deep.el-avatar {
  display: flex;
    align-items: center;
    justify-content: center;
  img {
  height: 100%;
  width: 100%;
}
}
</style>
